<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>caseDetailNameList</title>
    <style>
    table{border-collapse:collapse;border-spacing:0;border-left:1px solid #888;border-top:1px solid #888;margin: auto}
    th,td{border-right:1px solid #888;border-bottom:1px solid #888;padding:5px 15px;}
    th{font-weight:bold;}
    body{text-align: center}
    </style>
    {% load static %}
    <script type='text/javascript' src="/static/js/jquery.min.js"></script>
    <script type='text/javascript' src="/static/js/user.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("input[name='bindOrNot']").click(function(){
                var ifbind = $(this).parent().prev().find("input").val();
                var status = ifbind=='1'?0:1;
                var id = $(this).parent().parent().find("td:first").next().find("input").val();
                var scrf = $("input[name='csrfmiddlewaretoken']").val();
                $.ajax({
                   url:'/modifyCaseAndCaseDetailBind/',
                   type:'POST',
                   data:{status:status,id:id,csrfmiddlewaretoken:scrf},
                   success:function(data){
                       if(data=='1'){
                           alert('修改成功');
                           location.reload();
                       }else{
                           alert('修改失败');
                           location.reload();
                       }
                   }
                });
            });
            $("a[name='checkCaseDetailLink']").click(function(){
                var caseTitleId = $(this).parent().find("input").val();
                $("input[name='caseTitleId']").val(caseTitleId);
                $("form[name='checkCaseDetail']").submit();
            });

            $("input[name='changePosition']").click(function(){
                var caseDetailId = $(this).parent().find("input[name='caseDetailId']").val();
                var position = $(this).parent().find("input").val();
                var scrf = $("input[name='csrfmiddlewaretoken']").val();
                $.ajax({
                    url:'/changeCaseDetailPosition/',
                    type: 'POST',
                    data:{position:position,caseDetailId: caseDetailId,csrfmiddlewaretoken:scrf},
                    success:function(data){
                        if(data=='1'){
                            alert('操作成功');
                            location.reload();
                        }else{
                            alert('操作失败');
                            location.reload();
                        }
                    }
                });
            });
        });
    </script>
</head>
<body>
<div style="width: 80%;height:40px;background-color: aqua;margin: 0 auto ">
    <div style="float:left;margin-left: 10px;margin-top: 10px"><a href="#" name="projectManager">项目管理&nbsp;&nbsp;</a>|</div>
    <div style="float:left;margin-left: 10px;margin-top: 10px"><a href="#" name="testCaseManager">测试用例管理&nbsp;&nbsp;</a>|</div>
    <div style="float:left;margin-left: 10px;margin-top: 10px"><a href="#" name="bugCheck">bug情况查看&nbsp;&nbsp;</a>|</div>
    <div style="float:right;margin-right:10px;margin-top: 10px"><a href="#" name="logout">退出</a></div>
    <div style="float:right;margin-right:10px;margin-top: 10px">登录人：{{ request.session.showName }}&nbsp;&nbsp;</div>
    <form method="post" name="dataForm">
        {% csrf_token %}
        <input type="hidden" name="dataInput" />
    </form>
</div><p></p>
    <table>
        <tr>
            <td>case title</td>
            <td>{{ caseInfo.caseTitle }}</td>
        </tr>
    </table><p>
    <table>
        <tr>
            <td>序号</td>
            <td>case title name</td>
            <td>绑定情况</td>
            <td>操作</td>
            <td>位置</td>
        </tr>
     {% for caseDetail in caseDetails %}
        <tr>
            <td>{{ forloop.counter }}</td>
            <td><a href="#" name="checkCaseDetailLink">{{ caseDetail.caseDetailTitle }}</a>
            <input type="hidden" name="caseTitleId" value="{{ caseDetail.id }}" />
            </td>
            <td>
                {% if caseDetail.status == '1' %}<font color="green">已绑定</font> {% else %}<font color="red">未绑定</font>{% endif %}
                <input type="hidden" name="status" value="{{ caseDetail.status }}" />
            </td>
            <td>
                {% if caseDetail.status == '1' %}
                    <input value="解除绑定" type="button" name="bindOrNot"/>
                {% else %}
                    <input value="绑定" type="button" name="bindOrNot"/>
                {% endif %}
            </td>
            <td>
                <input value="{{ caseDetail.position }}" name="position" size="1px"/>
                <input value="确定" name="changePosition" type="button"/>
                <input value="{{ caseDetail.id }}" type="hidden" name="caseDetailId"/>
            </td>
        </tr>
     {% endfor %}
    </table>
    <form action="/checkCaseDetail/" method="post" name="checkCaseDetail">
        {% csrf_token %}
        <input type="hidden" name="caseTitleId" id="caseTitleId" />
    </form>

</body>
</html>